<template>
  <div class="start-box">
    <div class="star">
      <span v-for="(itemClass,index) in itemClasses" :key="index" :class="itemClass" class="star-item"></span>
      <div class="total">{{score*2}}分</div>
    </div>
  </div>

</template>

<script>
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';
  const CLS_OFF = 'off';

  export default {
    props: {
      score: {
        type: Number,
        default: 0
      }
    },
    computed: {
      itemClasses() {//计算星星
        let itemClasses = [];
        let score = Math.floor(this.score * 2) / 2;
        for (let i = 1; i <= score; i++) {//整数星星使用on
          itemClasses.push(CLS_ON);
        }
        if (score % 1 != 0) {//非整数星星使用half
          itemClasses.push(CLS_HALF);
        }
        while (itemClasses.length < LENGTH) {//余下的用无星星补全,使用off
          itemClasses.push(CLS_OFF);
        }
        return itemClasses;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .star
    display: flex
    align-items: center
    .star-item
      display: inline-block
      background-repeat: no-repeat
      margin-right: 0.12rem
      width: 0.373rem
      height: 0.373rem
      background-size: 100% 100%
      &.on
        background-image: url("./star1.png")
      &.off
        background-image: url("./star3.png")
      &.half
        background-image: url("./star2.png")
      &:last-child
        margin: 0
    .total
      display: flex
      align-items: center
      margin-left: 0.48rem
      font-size: 0.347rem
      color: rgba(250, 191, 72, 1)
      font-weight: 500
</style>
